<template>
	<!--恩格尔系数-->
	<div class="engel-coefficient">
		<div class="topBox">
			<el-row>
				<el-col span="12">
					<div style="margin:0 .5vw">
						<chart-block chartID="chart1" :title="singleLineOptionData.title" :optionData="singleLineOptionData" chartType="getSingleLine" height="39vh" style="padding:0 1vh 1vh 0;margin-top:1vh" titleType="blueBig"></chart-block>
					</div>
				</el-col>
				<el-col span="12">
					<div style="margin:0 .5vw">
						<chart-block chartID="chart2" :title="shadowLineOptionData.title" :optionData="shadowLineOptionData" chartType="getShadowLine" height="39vh" style="padding:0 1vh 1vh 0;margin-top:1vh" titleType="blueBig"></chart-block>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="bottomBox">
			<el-col span="12">
				<div style="margin:0 .5vw">
					<chart-block chartID="chart3" :title="DoubleBlockLineOptionData.title" :optionData="DoubleBlockLineOptionData" chartType="getDoubleBlockLine" height="43vh" style="padding:0 1vh 1vh 0" titleType="blueBig"></chart-block>
				</div>
			</el-col>
			<el-col span="12">
				<div style="margin:0 .5vw">
					<chart-block chartID="chart4" :title="optionData.title" :optionData="optionData" chartType="getDoubleBlockLine" height="43vh" style="padding:0 1vh 1vh 0" titleType="blueBig"></chart-block>

				</div>
			</el-col>
		</div>
	</div>
</template>

<script>
import {getEngelData,getEngelData1,getEngelData2,getEngelData3} from '@/api/pages.js'
export default {
	name: "engel-coefficient",
	components: {
		ChartBlock: () => import('@/components/chart-block')
	},
	props: {},
	data() {
		return {
			singleLineOptionData:{
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor:[//渐变色
					{ //折线图两侧竖线数据渐变色
						topColor:"rgba(183, 89, 255, 1)",
						bottomColor:"rgba(183, 89, 255, 0)"
					},
					{//折线图填充区域渐变色
						topColor:"rgba(183, 89, 255,.2)",
						bottomColor:"rgba(183, 89, 255, 0)"
					},
				],
				LineCircleColor:"#B759FF",//折线图颜色
				lineRadiusColor:"#B759FF",//折线图圆点颜色
				LineCircleBorderColor:"#B759FF",//折线图描边颜色
			},
			DoubleBlockLineOptionData:{
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				BarGradientColor:[//柱状图渐变色
					{
						topColor:'#0DCCFF',
						bottomColor:'#4760FF'
					},
					{
						topColor:'#F28E26',
						bottomColor:'#FD644F'
					},
				],
				lineColor:{
					linearColor:'#FF9F15',//线条颜色
					radiusColor:'#FF9F15',//折线点颜色
					borderColor:'#a6660d',//折线点边框颜色
				}
			},
			optionData:{
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				BarGradientColor:[//柱状图渐变色
					{
						topColor:'#0DCCFF',
						bottomColor:'#4760FF'
					},
					{
						topColor:'#F28E26',
						bottomColor:'#FD644F'
					},
				],
				lineColor:{
					linearColor:'#FF9F15',//线条颜色
					radiusColor:'#FF9F15',//折线点颜色
					borderColor:'#a6660d',//折线点边框颜色
				}
			},
			shadowLineOptionData:{
				LinearGradientColor:[//柱状渐变颜色
					{
						topColor:'rgba(0,88,255,0.8)',
						bottomColor:'rgba(0,88,255,0.1)',
						LineCircleColor:"#0058FF",//折线图颜色
						LineCircleBorderColor:"#00eaff",//折线图描边颜色
					},
					{
						topColor:'rgba(211,89,0,0.8)',
						bottomColor:'rgba(211,89,0,0.1)',
						LineCircleColor:"#D35900",//折线图颜色
						LineCircleBorderColor:"#F28E26",//折线图描边颜色
					}
				],
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
			}
		}
	},
	computed: {},
	created() {

	},
	mounted() {
		this.getEngelData('E033')
		this.getEngelData1('E034')
		this.getEngelData2('E035')
		this.getEngelData3('E036')
	},
	methods: {
		// 经济指标挖掘分析-恩格尔系数-恩格尔系数变化
		getEngelData(busiCode){
			getEngelData(busiCode).then(res=>{
				if(res.data.code===200){
					let datas = res.data.data.seriesData[0].data
					let lineData =new Array(datas.length)
					for(let i=0;i<lineData.length;i++){
						if(i===0){
							lineData[0]=datas[0]
						}else if(i===lineData.length-1){
							lineData[lineData.length-1]=datas[lineData.length-1]
						}else{
							lineData[i]=0
						}
					}
					this.singleLineOptionData.title = res.data.data.title
					this.singleLineOptionData.categoryAxis = res.data.data.categoryAxis //类目轴数据
					this.singleLineOptionData.seriesData = [
						{
							data: lineData,//折线图两侧竖线数据
						},
						res.data.data.seriesData[0]
					]
				}
			}).catch(err=>{

			})
		},
		// 经济指标挖掘分析-恩格尔系数-城镇居民食品烟酒支出变化
		getEngelData1(busiCode){
			getEngelData1(busiCode).then(res=>{
				if(res.data.code==200){
					this.shadowLineOptionData={
						title:res.data.data.title,
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: res.data.data.seriesData,
						smooth:true,
						// legendPosition:"center",
						LinearGradientColor:[//柱状渐变颜色
							{
								topColor:'rgba(0,88,255,0.8)',
								bottomColor:'rgba(0,88,255,0.1)',
								LineCircleColor:"#0058FF",//折线图颜色
								LineCircleBorderColor:"#00eaff",//折线图描边颜色
							},
							{
								topColor:'rgba(211,89,0,0.8)',
								bottomColor:'rgba(211,89,0,0.1)',
								LineCircleColor:"#D35900",//折线图颜色
								LineCircleBorderColor:"#F28E26",//折线图描边颜色
							}
						]
					}
				}
			}).catch(err=>{

			})
		},
		// 经济指标挖掘分析-恩格尔系数-城镇居民人均收入支出变化
		getEngelData2(busiCode){
			getEngelData2(busiCode).then(res=>{
				if(res.data.code==200){
					this.DoubleBlockLineOptionData = {
						title:res.data.data.title,
						categoryAxis:res.data.data.categoryAxis,
						seriesData:res.data.data.seriesData,
						isLine:false,//是否需要折线，需要折线的话在seriesData需要新增一个{}
						BarGradientColor:[//柱状图渐变色
							{
								topColor:'#0DCCFF',
								bottomColor:'#4760FF'
							},
							{
								topColor:'#F28E26',
								bottomColor:'#FD644F'
							},
						],
						lineColor:{
							linearColor:'#FF9F15',//线条颜色
							radiusColor:'#FF9F15',//折线点颜色
							borderColor:'#a6660d',//折线点边框颜色
						}
					}
				}
			}).catch(err=>{

			})
		},
		// 经济指标挖掘分析-恩格尔系数-农村城镇居民人均收入变化
		getEngelData3(busiCode){
			getEngelData3(busiCode).then(res=>{
				if(res.data.code==200){
					// this.optionData={
					// 	title:res.data.data.title,
					// 	categoryAxis: res.data.data.categoryAxis, //类目轴数据
					// 	seriesData: res.data.data.seriesData,
					// 	color:["#03cefa","#f1db25","#fd664d"],
					// }
					this.optionData = {
						title:res.data.data.title,
						categoryAxis:res.data.data.categoryAxis,
						seriesData:res.data.data.seriesData,
						isLine:false,//是否需要折线，需要折线的话在seriesData需要新增一个{}
						BarGradientColor:[//柱状图渐变色
							{
								topColor:'#58FDFF',
								bottomColor:'#FEA57E'
							},
							{
								topColor:'#1070FF',
								bottomColor:'#43EA80'
							},
						],
						lineColor:{
							linearColor:'#FF9F15',//线条颜色
							radiusColor:'#FF9F15',//折线点颜色
							borderColor:'#a6660d',//折线点边框颜色
						}
					}
				}
			}).catch(err=>{

			})
		},
	},
	watch: {}
}
</script>

<style scoped lang="scss">
.engel-coefficient {
	width:100%;
	height:100%;
	.topBox{
		width:100%;
		height:47%;
	}
	.bottomBox{
		width:100%;
		height:52%;
		margin-top:2vh
	}
}
</style>
